<template>
    <div class="table-operations">
        <slot name="left" />
        <template v-if="switchDeleted">
            <template v-if="deleted === 1">
                <el-popconfirm v-if="enable" title="确定启用吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm="exec('enable')">
                    <template #reference>
                        <span class="enable">
                            <el-icon class="check el-link el-link--success">
                                <check />
                            </el-icon>
                            <el-icon class="close el-link el-link--warning">
                                <close />
                            </el-icon>
                        </span>
                    </template>
                </el-popconfirm>
                <el-icon v-else class="el-link el-link--warning">
                    <close />
                </el-icon>
            </template>
            <template v-else>
                <el-popconfirm v-if="disable" title="确定禁用吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm="exec('disable')">
                    <template #reference>
                        <span class="disable">
                            <el-icon class="check el-link el-link--success">
                                <check />
                            </el-icon>
                            <el-icon class="close el-link el-link--warning">
                                <close />
                            </el-icon>
                        </span>
                    </template>
                </el-popconfirm>
                <el-icon v-else class="el-link el-link--success">
                    <check />
                </el-icon>
            </template>
        </template>
        <el-icon @click="exec('edit')" class="el-link el-link--primary" v-if="edit">
            <edit />
        </el-icon>
        <el-icon @click="exec('copy')" class="el-link el-link--default" v-if="copy">
            <document-copy />
        </el-icon>
        <el-popconfirm title="确定删除吗？" confirm-button-text="确定" cancel-button-text="取消" @confirm="exec('del')" v-if="del">
            <template #reference>
                <el-icon class="el-link el-link--danger">
                    <delete />
                </el-icon>
            </template>
        </el-popconfirm>
        <slot name="right" />
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

declare type EmitType = | 'edit' | 'copy' | 'enable' | 'disable' | 'del'

export default defineComponent({
    name: "TableOperations",
    emits: ['get', 'edit', 'copy', 'enable', 'disable', 'del'],
    props: {
        switchDeleted: { type: Boolean, default: () => true },
        deleted: { type: Number, default: () => 1 },
        edit: { type: Boolean, default: () => false },
        copy: { type: Boolean, default: () => false },
        enable: { type: Boolean, default: () => false },
        disable: { type: Boolean, default: () => false },
        del: { type: Boolean, default: () => false }
    },
    setup(props, { emit }) {
        return {
            exec: (operation: EmitType) => emit(operation)
        }
    }
})
</script>